<!--首页音乐日历-->
<template>
  <div class="calendar">
    <div class="header">
      <h4 class="title">{{ calendar.uiElement.subTitle.title }}</h4>
      <span class="more">更多<van-icon name="arrow" /></span>
    </div>
    <div class="content">
      <div
        class="item"
        v-for="item in calendar.creatives"
        :key="item.creativeId"
      >
        <div class="info">
          <!-- <div class="time">{{startTime(item.resources[0].resourceExtInfo.endTime )}}</div> -->
          <div class="mainTitle">
            {{ item.resources[0].uiElement.mainTitle.title }}
          </div>
        </div>
        <img :src="item.resources[0].uiElement.image.imageUrl" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["calendar"],
  computed:{
    // startTime(){
    //   return (e)=>{
    //     return new Date(e/1000).toLocaleDateString()
    //   }
    // }
  }
};
</script>

<style lang="less" scoped>
.calendar {
  background: #fff;
  padding: 2.666vw;
  margin-bottom: 2.666vw;
  .header {
    padding-bottom: 2.666vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .more {
      color: #474747;
      border: 2px solid #f6f6f6;
      padding: 1vw 1.5vw;
      display: flex;
      align-items: center;
      font-size: 12px;
      border-radius: 15px;
    }
  }
  .content {
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2.666vw 0;
      border-bottom: 1px solid #f7f7f7;
      .mainTitle {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        font-weight: 600;
      }
      img {
        width: 50px;
        border-radius: 10px;
      }
    }
  }
}
</style>